<template>
  <view class="goods-server-box" @click="emit('shutDown', '')">
    <view class="bottomMenu-box-content">
      <view class="bottomMenu-box-content-body" @click.stop="">

        <view class="goods-server-content-box">
          <view class="goods-server-content" v-for="(item) in props.goodsServe" :key="item.id">
            <text class="goods-server-content-title">{{ item.title }}</text>
            <text class="goods-server-content-body">{{ item.content }}</text>
          </view>
        </view>

        <view @click.stop=" emit('shutDown', '')" class="goods-server-know">我知道了</view>

      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { GoodsServe } from "../../../config/data/data"
import { onMounted, defineEmits, defineProps, ref } from "vue"


const emit = defineEmits(['shutDown'])

//接受的数据:商品服务说明数据
const props = defineProps<{ goodsServe: GoodsServe[] }>();


// 组件周期函数--监听组件挂载完毕
onMounted(() => {

});
// 组件周期函数--监听组件数据更新之前
// beforeUpdate() {},
// // 组件周期函数--监听组件数据更新之后
// updated() {},
// // 组件周期函数--监听组件激活(显示)
// activated() {},
// // 组件周期函数--监听组件停用(隐藏)
// deactivated() {},
// // 组件周期函数--监听组件销毁之前
// beforeDestroy() {},

</script>

<style scoped lang="scss">
.goods-server-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d0d0da8;
  z-index: 10;
  display: flex;
  justify-content: center;

  .bottomMenu-box-content {
    height: 100vh;
    width: 100%;
    position: relative;


    .bottomMenu-box-content-body {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      min-height: 50vh;
      max-height: 90vh;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: $uni-box-color;
      animation: identifier .2s ease 0s 1 forwards;

      .goods-server-content-box {
        width: 90%;
        height: 100%;
        overflow: auto;
        margin: 20rpx;



        .goods-server-content {
          width: 100%;
          font-size: 28rpx;
          display: flex;
          flex-direction: column;
          margin: 10rpx 0 30rpx;
          letter-spacing: 2rpx;

          .goods-server-content-title {
            color: #111111;
            margin: 10rpx 0;
          }

          .goods-server-content-body {
            font-size: 25rpx;
            color: $uni-bg-color-mask;
          }
        }
      }

      .goods-server-know {
        width: 90%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        color: $uni-box-color;
        margin: 20rpx 0;
        margin-top: auto;
        background-color: $uni-color-error;

        &:hover {
          opacity: .8;
        }
      }
    }

  }


  @keyframes identifier {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }

  }
}
</style>